<template>
    <el-main class="role">
        <el-main class="ep-body">
            <el-card class="ep-card">
                <el-form :model="form" name="form" >
                    <el-row :gutter="0" >
                        <el-col :span=6>
                            <el-form-item label="角色名称" label-width="120px">
                                <el-input v-model="form.rolename" type="text" name="rolename" placeholder="请输入角色名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=6>
                            <el-form-item label="角色描述" label-width="120px">
                                <el-input v-model="form.roledesc" type="text" name="roledesc" placeholder="请输入角色描述"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=6>
                            <el-form-item label="角色类型" label-width="100px" prop="roletype">
                                <el-select v-model="form.roletype" >
                                    <el-option v-for="item in codeTypes.ROLETYPE" :key="item.key" :label="item.value" :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>

                        <el-col :span=6>
                            <!--<el-row type="flex" justify="center">-->
                            <el-button style="float: right;margin-right: 10px" size="small" id="add" type="primary"   @click="addRole">添加角色</el-button>
                            <el-button style="float: right;margin-right: 10px" size="small" id="query" @click="query">查询</el-button>
                                <!--<el-button id="edit" type="primary"   @click="editRole">编辑角色</el-button>-->
                            <!--</el-row>-->
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
           <el-card class="ep-card">
                <el-row>
                    <el-table :data="tableData1.data" border style="width: 100%;" height="calc(100vh - 360px)"  @row-dblclick="handleEdit('', $event)">
                        <el-table-column type="selection" width="35px"></el-table-column>
                        <el-table-column sortable prop="rolename" label="角色名称" align="center"></el-table-column>
                        <el-table-column sortable prop="roledesc" label="角色描述" align="center"></el-table-column>
                        <el-table-column sortable align="center"  prop="roletype" label="角色类型" >
                            <template slot-scope="scope">
                                <div v-for="roletype in codeTypes.ROLETYPE">
                                    <span v-if="roletype.key === scope.row.roletype">
                                        {{roletype.value}}
                                    </span>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center"  >
                            <template slot-scope="scope">
                                <i class="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" title="编辑"></i>
                                <i class="el-icon-setting" @click="handleGrant(scope.$index, scope.row)" title="授权"></i>
                                <i class="el-icon-delete" @click="handleDelete(scope.$index, scope.row)" title="删除"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="tableData1.page"
                        :page-sizes="[50, 100, 150, 200]"
                        :page-size="50"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="tableData1.total">
                    </el-pagination>
                </el-row>
            </el-card>
        </el-main>
        <!--新增或者修改角色的弹框dialog-->
        <el-dialog
            :title="titleMap[dialogStatus]"
            :visible.sync="dialogFormVisible"
            width="45%">
           <!-- //:before-close="handleClose">-->
            <el-form :model="form1" name="form1" :rules="rules" ref="form1" style="width: 1000px">
                <el-row :gutter="0" >
                    <el-col :span=12>
                        <el-form-item label="角色名称" label-width="120px"  prop="rolename">
                            <el-input v-model="form1.rolename" type="text" name="rolename" placeholder="请输入角色名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=12>
                        <el-form-item label="角色描述" label-width="120px"  prop="roledesc">
                            <el-input v-model="form1.roledesc" type="text" name="roledesc" placeholder="请输入角色描述"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
               <el-row>
                   <el-col :span=12>
                       <el-form-item label="角色类型" label-width="120px" prop="roletype">
                           <el-select v-model="form1.roletype" style="width: 380px">
                               <el-option v-for="item in codeTypes.ROLETYPE" :key="item.key" :label="item.value" :value="item.key">
                               </el-option>
                           </el-select>
                       </el-form-item>
                   </el-col>

                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>

        </el-dialog>

        <el-dialog
            :title="titleMap[dialogStatus]"
            :visible.sync="dialogVisible"
            width="45%">
            <!--<el-tree accordion
                     :data="treeData"
                     show-checkbox
                     node-key="id"
                     :default-expanded-keys="checkedData"
                     :default-checked-keys="checkedData"
                     :props="defaultProps"
                     ref="categroyTree"
                     @check-change="handleCheckChange"
                     highlight-current></el-tree>-->
            <el-scrollbar style="height: 430px;width: 194px">
                <el-tree
                    :data="treedata"
                    show-checkbox
                    node-key="functionid"
                    ref="tree"
                    highlight-current
                    :props="defaultProps"
                    :default-checked-keys="tableData1.defaultcheckedkeys"
                    @check-change="handleCheckChange">
                </el-tree>
            </el-scrollbar>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveGrantRoleTree">确 定</el-button>
            </div>
        </el-dialog>
    </el-main>
</template>
<script type="es6">
    import Vue from 'vue';
    export default {
        data() {
            return {
                dialogFormVisible:false,
                dialogVisible:false,
                roleInfo:[],
                treedata:[],
                checkedData: [ ],
                defaultProps: {
                    children: 'children',
                    label: 'title'
                },
                form:{
                    rolename: '',
                    roledesc: '',
                    roletype: '',

                },form1:{
                    rolename: '',
                    roledesc:'',
                    roletype:'',

                },
                titleMap: {
                    addRole:'新增角色',
                    editRole: "编辑角色",
                    grantRole:"角色授权",
                    removegrantRole:"解除角色授权",
                },
                dialogStatus:"",

                rules:{
                    rolename: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'}
                    ],
                    roledesc: [
                        {required: true, message: '请输入角色描述', trigger: 'blur'}
                    ],
                    roletype: [
                        {required: true, message: '请输入角色类型', trigger: 'blur'}
                    ],

                },
                codeTypes:{
                    ROLETYPE:[],
                },
                pager: {
                    page: 1,
                    size: 10,
                    data:[]
                },

                tableData1:{
                    total: 0,
                    size:50,
                    page:0,
                    data:[],
                    defaultcheckedkeys:[],
                },
                /*defaultcheckedkeys:{
                    data:[],
                },*/
            }
        },
        computed: {
            init_form() {
                return this.$store.getters.init.form;
            },
            doInitinit_form: {
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    return this.$store.getters.common.form;
                },
                set: function (newValue) {
                    return newValue;
                }
            },
            tableData: {
                get: function () {
                    return this.$store.getters.tableData;
                },
                set: function (newValue) {
                    return newValue;
                }
            },
            doInitinit_tableData: {
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    return this.$store.getters.common.tableData;
                },
                set: function (newValue) {
                    return newValue;
                }
            },doInitinit_tableData1: {
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    return this.$store.getters.common.tableData1;
                },
                set: function (newValue) {
                    return newValue;
                }
            },
            doInitinit_treedata:{
                get: function () {
                    if (this.$store.getters.common === null) return [];
                    return this.$store.getters.common.treedata;
                },
                set: function (newValue) {
                    return newValue;
                }
            },
            backFun() {
                return this.$store.getters.backFun;
            }
        },
        watch: {
            init_form: {
                handler(value) {
                    this.getInitform(value);
                },
                deep: true
            },
            doInitform: {
                handler(value) {
                    this.getInitform(value);
                },
                deep: true
            },
            tableData: {
                handler(value) {
                    this.getInittableData(value);
                },
                deep: true
            },
            doInittableData: {
                handler(value) {
                    this.getInittableData(value);
                },
                deep: true
            },init_treedata: {
                handler(value) {
                    this.getTreedata(value);


                },
                deep: true
            },
            doInit_treedata: {
                handler(value) {
                    this.getTreedata(value);
                },
                deep: true
            },
            backFun: {
                handler(value) {
                    var backFunType = value.backFunType;
                    if(backFunType === "CLOSE_DIALOG") {
                        this.dialogFormVisible = false;
                        this.form1 = {
                            rolename: '',
                            roledesc: '',
                            roletype: '',
                        };
                    }
                },
                deep: true
            }
        },
        mounted() {
           /* let param = {
                codeTypes:this.codeTypes,
                form:this.form,
                form1:this.form1,
                tableData:this.tableData,
                tableData1:this.tableData1
            };
            this.$store.dispatch('SET_INIT', param);*/

            this.initCodeTypes();
            this.query();
        },
        methods: {
            getInitform(value) {
                this.form = value;
            },
            gettableData(value) {
                this.tableData = value;
            },
            gettableData1(value) {
                this.tableData1 = value;
            },
            handleSizeChange(val) {
                this.tableData.size=val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.tableData.page=val;
                console.log(`当前页: ${val}`);
            },
            handleEdit(id) {
                this.dialogFormVisible = true;
            },
            save() {
                // 表单校验
                this.$refs["form1"].validate((valid) => {
                    if (valid) {
                        let params = this.form1;
                        this.$api.commonPost(this.$store.getters.path + "/save", params).then(res => {
                            this.handleMessage(res);
                            if(res.status === "0") {
                                this.dialogFormVisible = false;
                                //if(this.codeForm.aaz093 != null && this.codeForm.aaz093 != '') {
                                    this.query();
                                //}
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addRole(){
                var x=document.getElementById("form1");
                //console.info(x.roletype.value);
                this.dialogFormVisible=true;
                this.dialogStatus="addRole";
            },
            editRole(){
                this.dialogFormVisible=true;
                this.dialogStatus="editRole";
            },
            closeDialog(){
                this.dialogFormVisible=false;
            },
            query(){
                let params={rolename:this.form.rolename,roledesc:this.form.roledesc,roletype:this.form.roletype,page:this.tableData1.page-1,size:this.tableData1.size}
                this.$api.commonGet(this.$store.getters.path+"/queryRole",params).then(res=>{
                   console.info(res.data.data);
                    if(res.status === "0") {
                        this.tableData1.total = res.data.total;
                        this.tableData1.data = res.data.data;
                    }
                });
            },
            initCodeTypes() {
                let params = this.codeTypes;
                this.$api.commonPost(this.$store.getters.path + "/initCodeTypes", params).then(res => {
                    this.handleMessage(res);
                    if(res.status === "0") {
                        console.info(res);
                        this.codeTypes = res.data;
                        console.info(this.codeTypes);
                    }
                });
            },
            handleEdit(index, row) {
                console.info(row);
                this.dialogFormVisible=true;
                this.dialogStatus="editRole";
                this.form1 = row;
                //console.info(JSON.parse(JSON.stringify(row)));
            },
            handleDelete(index, row) {
                //console.log(index, row);
                this.$confirm('是否删除该角色?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.form1 = JSON.parse(JSON.stringify(row));
                    this.delete();
                }).catch(() => {
                    Vue.prototype.$message.success("已取消删除");
                });
            },
            delete() {
                let params = this.form1;
                this.$api.commonPost(this.$store.getters.path + "/delete", params).then(res => {
                    this.handleMessage(res);
                    if(res.status === "0") {
                        this.query();
                    }
                });
            },
            handleGrant(index, row){
                this.dialogVisible=true;
                this.dialogStatus="grantRole";
                this.roleInfo=row;
                this.getCheckedKeys();
                this.getTreeDataInfo();
            },
            getCheckedKeys(){
                let _this=this;
                let roleId=this.roleInfo.roleid;
                _this.$api.commonGet(this.$store.getters.path+"/getCheckedTree",{roleId:roleId}).then(function (res)  {
                    if(res.status === "0") {
                       // this.defaultcheckedkeys.data = [];
                        _this.tableData1.defaultcheckedkeys=res.data;
                    }
                })

            },
            getTreeDataInfo() {
                let _this=this;
               let roletype=this.roleInfo.roletype;
               _this.$api.commonGet(this.$store.getters.path+"/queryTree",{roletype:roletype}).then(function (res)  {
                   console.log(res.data);
                    if (res.status === "0") {
                        let newData=res.data;
                        //console.log("信息"+newData);
                        _this.treedata=newData;
                    }
                })
            },
           handleCheckChange(data, checked, indeterminate)
            {
                /*console.log(data);
                console.log(checked);*/
               //console.log(this.$refs.tree.getCheckedNodes(false));
                //console.log(this.$refs.tree.getCheckedKeys(false))
            },
            saveGrantRoleTree(){
                let roleId=this.roleInfo.roleid;
                let treeInfo=this.$refs.tree.getCheckedNodes(false,true);
                let params={roleId:roleId,treeInfo:treeInfo};
                console.log(params);
                this.$api.commonPost(this.$store.getters.path + "/addRoleRef",params).then(res => {
                    //console.log("输出结果"+res.status);
                    this.handleMessage(res);
                    if(res.status === "0") {
                        this.dialogVisible=false;
                    }
                });
            },
            handleMessage(res) {
                if (res.status === '0') {
                    if (res.message !== null) {
                        Vue.prototype.$message.success(res.message);
                    }
                } else if (res.status === '1' && res.message !== null) {
                    Vue.prototype.$message.warning(res.message);
                } else if (res.status === '9' && res.message !== null) {
                    Vue.prototype.$message.error(res.message);
                }
            },
            getTreedata(value) {
                this.treedata = value;
            },
        }
    }
</script>
<style lang="less" scoped>
    .role /deep/ .el-icon-edit,.el-icon-setting,.el-icon-delete{
        color:#0080fa;
        font-size:18px;
        padding: 7px 0px;

    }
</style>

